<template>
  <CURDDialog
    :create-title="t('aiot.serviceOrder.updatePlanTime')"
    :show-options="showOptions"
    :model="model"
    :model-form-setting="modelFormSetting"
    :model-rules="modelRules"
    :curd="curd"
    :hide-next-add-btn="true"
    @before-ok="beforeOk"
    @ok="$emit('ok', model.plannTime)"
  />
</template>
<script setup lang="ts">
import { ref, watch, h } from "vue";
import { Api } from "/@/api/aiot/serviceWorkOrder";
import {
  CURDAction,
  CURDModalEvent,
  FormItemComponentType,
  FormItemData,
  ShowCURDModalOptions,
} from "../../CURDDialog/models";
import { useI18n } from "/@/locales/useI18n";
import { WorkOrdersOperations } from "/@/types/components";
import { useCURD } from "/@/hooks/useCURD";
import { UpdateWorkOrderItem } from "/@/api/aiot/serviceWorkOrder/models";
import dayjs, { Dayjs } from "dayjs";

const { t } = useI18n();
const disabledDate = (current: Dayjs) => {
  return current && current < dayjs().startOf("day");
};
const props = defineProps<{
  options?: WorkOrdersOperations;
}>();
defineEmits(["ok"]);

watch(
  () => props.options,
  (v) => {
    if (!v) return;
    projectId.value = props.options?.projectId || "";
    showOptions.value = { action: CURDAction.CREATE };
  }
);

const showOptions = ref<ShowCURDModalOptions>();
const projectId = ref<string>("");

const { curd } = useCURD({
  createUrl: Api.updateWorkOrdersOperations,
});

const model = ref<UpdateWorkOrderItem>({
  plannTime: "",
});
const modelRules = [];
const modelFormSetting: FormItemData<UpdateWorkOrderItem>[] = [
  {
    label: t("aiot.serviceApply.plannTime"),
    key: "plannTime",
    type: FormItemComponentType.DATEPICKER,
    props: {
      showTime: { format: "HH:mm" },
      format: t("common.dateTimeFormatStr1"),
      valueFormat: t("common.dateTimeFormatStr1"),
      disabledDate: disabledDate,
    },
  },
];
function beforeOk(e: CURDModalEvent) {
  if (e.model) {
    Object.assign(e.model, props.options);
  }
}
</script>
